<template>
  <div class="hotel-common-item">
    <div
      class="container"
      v-for="item in hotel"
      :key="item.id"
      @click="$router.push(`/hotelDetail/${item.id}`)"
    >
      <div class="title">{{ item.name }}</div>
      <div class="go">查看详情<i class="el-icon-s-promotion"></i></div>
      <img :src="item.cover" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "HotelCommonItem",
  props: {
    hotel: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style lang="less" scoped>
.hotel-common-item {
  display: flex;
  flex-wrap: wrap;
  min-height: 300px;
  .container {
    margin: 10px 6px;
    position: relative;
    width: 254px;
    height: 160px;
    cursor: pointer;
    border-radius: 10px; /* 设置弧度 */
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.4); /* 设置阴影 */
    transition: all 0.3s;
    .title {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      font-size: 18px;
      color: #fff;
      font-weight: 600;
      transform: translate(-50%, -50%);
      opacity: 1;
      transition: all 0.3s;
    }
    .go {
      position: absolute;
      top: 50%;
      left: 50%;
      padding-bottom: 4px;
      font-size: 19px;
      color: #fff;
      font-weight: 600;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all 0.3s;
      &::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 50%;
        width: 0;
        height: 2px; /* 边框高度 */
        background-color: #fff; /* 边框颜色 */
        transition: width 0.6s ease, left 0.6s ease; /* 宽度和位置过渡效果 */
      }
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background-color: rgba(0, 0, 0, 0.16);
      transition: all 0.3s;
    }
    &:hover {
      box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.6); /* 设置阴影 */
      .title {
        opacity: 0;
      }
      .go {
        opacity: 1;
        &::after {
          width: 100%;
          left: 0;
        }
      }
    }
    &:hover::before {
      background-color: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>